<template>
    <div class="WorkingSchedule" v-loading="loading">
        <el-form ref="form" :model="form" label-position="top" class="myform">
            <div>
                <!-- <el-form-item label="标签分类/内容" class="myform-item">
                    <el-input
                        v-model="form.factory_contract_no"
                        placeholder="请输入标签分类/内容"
                        clearable
                        @keyup.enter.native="onSearch"
                    ></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </el-form-item>-->
            </div>
            <div>
                <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="onUpdate" icon="el-icon-plus">更新延期数</el-button>
                </el-form-item>
            </div>
        </el-form>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column label="表名" align="center" prop="tablename"></el-table-column>
            <el-table-column label="第一步" align="center" prop="first_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.first_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.first_status == 0 ? '未完成' : row.first_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第二步" align="center" prop="send_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.send_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.send_status == 0 ? '未完成' : row.send_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第三步" align="center" prop="three_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.three_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.three_status == 0 ? '未完成' : row.three_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第四步" align="center" prop="four_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.four_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.four_status == 0 ? '未完成' : row.four_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第五步" align="center" prop="five_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.five_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.five_status == 0 ? '未完成' : row.five_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第六步" align="center" prop="six_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.six_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.six_status == 0 ? '未完成' : row.six_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第七步" align="center" prop="seven_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.seven_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.seven_status == 0 ? '未完成' : row.seven_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第八步" align="center" prop="eng_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.eng_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.eng_status == 0 ? '未完成' : row.eng_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第九步" align="center" prop="nig_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.nig_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.nig_status == 0 ? '未完成' : row.nig_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="第十步" align="center" prop="ten_status">
                <template slot-scope="{ row }">
                    <div
                        :style="{ color: row.ten_status == 2 ? '#2c70d6' : '' }"
                    >{{ row.ten_status == 0 ? '未完成' : row.ten_status == 1 ? '进行中' : '已完成' }}</div>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="{ row }">
                    <el-button type="text" @click="onEdit(row.id)">编辑</el-button>
                    <!-- <el-button type="text" style="color:red" @click="onDelete(row.id)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :form="form"
            :total="total"
            @paginationPostOrderTaskList="postAdminDelayGet_jst_wfh_table"
        />
    </div>
</template>

<script>
import {
    postAdminDelayGet_jst_wfh_table
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
    components: { pagination },
    data() {
        return {
            loading: false,
            auditdialogVisible: false, //审核
            paymentdialogVisible: false, // 付款

            form: {
                page: 1,
                size: 10,
            },
            tableData: [],
            total: 1,
        };
    },
    mounted() {
        let form = this.form;
        this.postAdminDelayGet_jst_wfh_table(form);
    },
    methods: {
        // 编辑
        onEdit(id) {
            this.$router.push({ name: "UpdateDelay", query: { id } });
        },
        // 新增
        onUpdate() {
            this.$router.push({ name: "UpdateDelay" });
        },
        // 列表
        async postAdminDelayGet_jst_wfh_table(data) {
            this.loading = true;
            this.form = data;
            postAdminDelayGet_jst_wfh_table(data)
                .then((res) => {
                    this.loading = false;
                    console.log("列表", res);
                    this.tableData = res.data;
                    this.total = Number(res.total);
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 搜索
        onSearch() {
            this.form.page = 1;
            this.form.size = 10;
            this.postAdminDelayGet_jst_wfh_table(this.form);
        },
    },
};
</script>

<style lang="scss" scoped>
.myform {
    display: flex;
    justify-content: space-between;
    > div {
        display: flex;
    }
    &-item {
        margin-right: 10px;
    }
}
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
}
</style>
